import { A, useLocation } from "@solidjs/router";
import { LoaderCircle } from "lucide-solid";
import { type JSX, Show } from "solid-js";
import solidIconUrl from "@/assets/solid.svg";
import Avatar from "@/components/Avatar";
import Button from "@/components/Button";
import useAuthStore from "@/store/auth";

type Props = {
  children?: JSX.Element | undefined;
};

export default function RootLayout(p: Props) {
  const loc = useLocation();
  const { auth, logout } = useAuthStore();

  return (
    <div class="min-h-screen grid grid-rows-[auto_1fr_auto]">
      <nav class="px-6 py-2 flex items-center gap-4 bg-purple-50/95 border-b border-gray-300 sticky top-0 z-10 h-12">
        <img class="w-6" src="/vite.svg" alt="vite icon" />
        <img class="w-6" src={solidIconUrl} alt="solid icon" />
        <A href="/">Home</A>
        <A href="/demo">Demo</A>
        <Show when={auth.status === "failed"}>
          <A href="/login">Login</A>
        </Show>
        <Show when={auth.status === "loading"}>
          <LoaderCircle class="animate-spin" />
        </Show>
        <Show when={auth.status === "ok"}>
          <div class="inline-flex items-center gap-4">
            <Avatar src={auth.avatar || ""} alt="my avatar" />
            {auth.username}
          </div>
          <Button size="sm" variant="outline" onClick={() => logout()}>
            Logout
          </Button>
        </Show>
      </nav>
      <main>{p.children}</main>
      <footer class="bg-purple-50 border-t border-gray-300 px-4 py-2">
        <p>Footer</p>
        <p>
          <strong>Current route path:</strong> {loc.pathname}
        </p>
      </footer>
    </div>
  );
}
